<script setup lang="ts">
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

// 只读写法 ，大部分情况下使用
// const fullName = computed(()=>{
//   return firstName.value + ' ' + lastName.value
// })

// 完整写法，计算属性需要赋值时使用
const fullName = computed({
  get(){
    return firstName.value + ' ' + lastName.value
  },
  set(value){
    const names = value.split(' ')
    firstName.value = names[0]
    lastName.value = names[1]
  }

})
</script>

<template>
  <div> 
    <input type="text" v-model="firstName" >
    <input type="text" v-model="lastName">
    <p>完成姓名</p>
    <input type="text"v-model="fullName">
  </div>
  
</template>


